<template>
  <div>
    <ul class="recommend">
      <li v-for="(item, index) in recommend" :key="index">
        <a :ref="item.link"
          ><img :src="item.image" alt="" />
          <p>{{ item.title }}</p></a
        >
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    recommend: Array,
  },
};
</script>

<style>
ul{
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 10px rgb(235, 230, 230) solid;
}
li{
  list-style: none;
}
.recommend{
  display: flex;
}
.recommend li{
  flex: 1;
  text-align: center;
}
.recommend li img{
  display: block;
  width: 80%;
  margin: 10px auto;
}

</style>